<script setup>
import Sidebar from "./components/Sidebar.vue";
import Footer from "./components/Footer.vue";
import {RouterView} from "vue-router";
</script>

<template>

  <div id="app">
    <Sidebar />
   <div>
     <RouterView></RouterView>
   </div>
    <div style="grid-column: 1 / span 2; grid-row: 2; height: 100%; background-color: #c4ccd8" >
      <Footer version="2024-04-22"/>
    </div>
  </div>
  <!-- 
  <div class="common-layout">
    <el-container>
      <el-container>
        侧边栏 -->
  <!-- <el-aside width="175px" height="calc(100vh - 29px);">
          <Sidebar />
        </el-aside>

        <el-main>
          <div class="main-content"></div>
        </el-main>
      </el-container>
      底栏 -->
  <!-- <el-footer height="29px">
        <Footer />
      </el-footer>
    </el-container>
  </div> -->
</template>
<style scoped>

* {
  margin: 0;
  padding: 0;
}

#app {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 18% 82%;
  grid-template-rows: 96% 4%;
}
</style>

